<template>
  <div class="el-card form-container is-never-shadow">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
      <el-form-item label="分类名称:" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="name">
        <el-select v-model="ruleForm.region">
          <el-option label="无上级分类" value="shanghai"></el-option>
          <el-option label="服装" value="beijing"></el-option>
          <el-option label="手机数码" value="beijing"></el-option>
          <el-option label="家用电器" value="beijing"></el-option>
          <el-option label="家具家装" value="beijing"></el-option>
          <el-option label="汽车用品" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数量单位:">
        <el-input v-model="ruleForm.productUnit"></el-input>
      </el-form-item>
      <el-form-item label="排序:">
        <el-input v-model="ruleForm.sort"></el-input>
      </el-form-item>
      <el-form-item label="是否显示:">
        <el-radio label="1" v-model="ruleForm.radio">是</el-radio>
        <el-radio label="2" v-model="ruleForm.radio">否</el-radio>
      </el-form-item>
      <el-form-item label="是否显示在导航栏:">
        <el-radio label="1" v-model="ruleForm.radio1">是</el-radio>
        <el-radio label="2" v-model="ruleForm.radio1">否</el-radio>
      </el-form-item>
      <el-form-item label="分类图标:">
        <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="3">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品分类：">
        <div class="block">
          <el-cascader v-model="ruleForm.region1" :options="categoryList" :props="categoryProps"></el-cascader>
          <el-button style="margin-left: 20px">删除</el-button>
        </div>
        <el-button type="primary" style="margin-top: 20px" size="mini">新增</el-button>
      </el-form-item>
      <el-form-item label="关键词:">
        <el-input v-model="ruleForm.keywords"></el-input>
      </el-form-item>
      <el-form-item label="分类描述:">
        <el-input v-model="ruleForm.description"></el-input>
        <el-button type="primary" style="margin-top: 20px" @click="open">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { fetchCommodityClassificationEdit, fetchGoodsClassification } from '@/api/api'
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: '无上级分类',
        radio: '1',
        region1: '',
        radio1: '1',
      },
      categoryList: [],
      categoryProps: {
        value: 'name',
        label: 'name',
        children: 'productAttributeList',
        expandTrigger: 'click',
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    open() {
      this.$confirm('是否提交数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
  created() {
    var id = this.$route.query.id
    fetchCommodityClassificationEdit(id).then((res) => {
      this.ruleForm = { ...this.ruleForm, ...res.data }
    })
    fetchGoodsClassification().then((res) => {
      this.categoryList = res.data
    })
  },
}
</script>

<style lang="scss">
.form-container {
  width: 800px;
}
.form-container {
  position: absolute;
  left: 0;
  right: 0;
  width: 720px;
  padding: 35px 35px 15px;
  margin: 20px auto;
}
</style>
